<div class="wind-energy-map" fxLayout="row" #map>
  <table class="farm-data" cellspacing="0" cellpadding=0>
    <thead>
      <tr>
        <th>风场</th>
        <th>风向</th>
        <th>温度(℃)</th>
        <th>风速(m/s)</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of farms;let i=index">
        <td>{{item?.farmName}}</td>
        <td>
          <div class="windDirec" [ngStyle]="{transform: 'rotate('+(item?.windDirectionReal?.value+90)+'deg)'}">

          </div>
        </td>
        <td>
          {{item?.temperatureReal?.value | number:'1.1-2'}}
        </td>
        <td>
          {{item?.windSpeedReal?.value | number:'1.1-2'}}
        </td>
      </tr>
    </tbody>
  </table>
  <!-- <ul class="farm-data">
    <li *ngFor="let item of farms;let i=index" fxLayout="row" [ngClass]="{active: active===i}" (click)="onHeaderClick(item,i)">
        <header>{{item?.farmName}}</header>
         <section class="map-item-bottom" fxLayout="row" fxFlexFill>
           <aside fxFlex="30%">
             <div [ngStyle]="{transform: 'rotate('+(item?.windDirectionReal?.value+90)+'deg)'}">
   
             </div>
           </aside>
           <section class="farm-data-content" fxFlex="70%" fxLayout="column">
             <span>
                {{item?.temperatureReal?.value | number:'1.1-2'}}℃
             </span>
             <span>
                {{item?.windSpeedReal?.value | number:'1.1-2'}}m/s
              </span>
             
              
           </section>
         </section>
    </li>
  </ul> -->
  <div class="map-content">
    <section class="map-item" [ngClass]="{active: active===i}" *ngFor="let item of farms;let i=index" (click)="onHeaderClick(item,i)">
      <app-farm-model 
        [ngStyle]='{zoom:zoom}' 
        [farmName]="item?.farmName" 
        [farmX]="item?.posx + offsetX" 
        [farmY]="item?.posy + offsetY"
        [windSpeed]="item?.windSpeedReal?.value" 
        [unShowName]="item?.unShowName" 
        [active]="active" 
        [i]="i" 
        [ngClass]="{'on':i == active}">
      </app-farm-model>
      <!-- <header>{{item?.farmName}}</header> -->
      <!--  <section class="map-item-bottom" fxLayout="row">
        <aside fxFlex="30%">
          <div [ngStyle]="{transform: 'rotate('+(item?.windDirectionReal?.value+90)+'deg)'}">

          </div>
        </aside>
        <section fxFlex="70%">
          {{item?.temperatureReal?.value | number:'1.1-2'}}℃
          <br> {{item?.windSpeedReal?.value | number:'1.1-2'}}m/s
        </section>
      </section> -->
    </section>
  </div>

</div>